import React from 'react'
import { View, Text, Platform, StyleSheet } from 'react-native'

import HeaderH5 from './HeaderH5'
import HeaderIos from './HeaderIos'

import Body from './Body'

const Header = Platform.select({
  ios: HeaderIos,
  web: HeaderH5
})

const styles = StyleSheet.create({
  font: {
    fontSize: 100,
    color: Platform.OS === 'web' ? 'red' : 'green',
    ...Platform.select({
      ios: {
        fontWeight: 'normal',
        fontStyle: 'italic',
        textDecorationLine: 'underline'
      },
      web: {
        textShadowColor: 'yellow',
        textShadowRadius: 5,
        textShadowOffset: {
          width: 5,
          height: 5
        },
        textTransform: 'uppercase'
      }
    })
  }
})

export default function Index() {
  console.log(Platform.Version)
  return (
    <View>
      <Header></Header>
      <Body></Body>
      <Text
        style={styles.font}
      >
        hello
      </Text>
    </View>
  )
}